import React, { PureComponent } from 'react'
import { HomeWrapper, HomeRight, HomeLeft, BackToTop } from "./style"
import { connect } from "react-redux"
import { action } from "./store"

import Topic from "./components/Topic"
import Recommend from "./components/Recommend"
import List from "./components/List"
import Writer from "./components/Writer"

class Home extends PureComponent {
    render() {
        return (
            <HomeWrapper>
                <HomeLeft>
                    <img className="img_banner" alt="540" src='https://upload.jianshu.io/admin_banners/web_images/4995/af694827b911ab360fe44d5252422109849c5760.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540' ></img>
                    <Topic></Topic>
                    <List></List>
                </HomeLeft>
                <HomeRight>
                    <Recommend></Recommend>
                    <Writer></Writer>
                </HomeRight>
                {this.props.showScroll ? <BackToTop onClick={this.bakcTop}>↑↑</BackToTop> : null}
            </HomeWrapper>
        )
    }
    componentDidMount() {
        this.props.getHome();
        this.bindEven();
    }
    bindEven() {
        window.addEventListener("scroll", this.props.changeScroll)
    }
    componentWillUnmount() {
        window.removeEventListener("scroll", this.props.changeScroll)
    }
    bakcTop() {
        window.scrollTo(0, 0)
    }
}

const mapState = (state) => ({
    showScroll: state.getIn(["home", "showScroll"])
})


const mapMethods = (dispatch) => {
    return {
        getHome() {
            dispatch(action.getHomeData())
        },
        changeScroll() {
            if (document.documentElement.scrollTop > 200) {
                dispatch(action.setScroll(true))
            } else {
                dispatch(action.setScroll(false))
            }
        }
    }
}

export default connect(mapState, mapMethods)(Home)
